<template>
  <div class="toolbar">
    <ul class="el-menus yb">
      <li @click="reset()">
        <span>
          复位 <i  class="icon iconfont iconchushishijiao"></i
        ></span>
      </li>
      <li  >
        <span  @click="layerCtrl">
          图层控制 <i   class="icon iconfont icontuceng"></i
        ></span>
      </li>
      <li  >
        <el-dropdown trigger="click">
        <span class="el-dropdown-link">
          下拉菜单
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item icon="el-icon-plus"   @click.native="distanceMeasure">距离测量</el-dropdown-item>
          <el-dropdown-item icon="el-icon-circle-plus"   @click.native="areaMeasure">面积测量</el-dropdown-item>
          <el-dropdown-item icon="el-icon-circle-plus-outline"   @click.native="heightMeasure">高度测量</el-dropdown-item>
          <el-dropdown-item icon="el-icon-check"  @click.native="clearMeasure">清除</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      </li>
      <li  >
        <el-dropdown trigger="click">
      <span class="el-dropdown-link">
        其他<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item icon="el-icon-plus">绕点飞行</el-dropdown-item>
        <el-dropdown-item icon="el-icon-circle-plus">漫游</el-dropdown-item>
        <el-dropdown-item icon="el-icon-circle-plus-outline">全屏</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
      </li>
    </ul>
    <LayerCtrl :layerCtrl = "layerCtrl" @changeLayerCtrl = "layerCtrl" v-if="isLayerCtrl"/>
     <!--  -->
  </div>
</template>

<script>
import LayerCtrl from "./LayerCtrl";
let measureSurface = new mars3d.Measure({
    viewer: viewer,
    terrain: false
}); 
export default {
  components: {
    LayerCtrl,
  },
  data(){
    return {
      isLayerCtrl:false
    }
  },
  mounted(){
    
  },
  methods:{
    reset(){
      this.$cp.initCesiumView(118.76857488760477,32.07172775831959,130,0.6708941722301089,-0.9083850719785813,0.0030597702001138316)
    },
    layerCtrl(){
      this.isLayerCtrl = !this.isLayerCtrl
    },
    distanceMeasure(){
      measureSurface.measuerLength();//测量长度
    },
    areaMeasure(){
      measureSurface.measureArea();//测量长度
    },
    heightMeasure(){ 
      measureSurface.measureHeight();//测量长度
    },
    clearMeasure(){
      measureSurface.clearMeasure();
    }
  }
};
</script>
<style>
  .toolbar .el-menus .el-dropdown {
    color: #fff;
  }
</style>
<style lang="stylus" scoped>
@import '../../assets/css/varibles.styl';
.toolbar{
  padding: .03rem 0;
  position: fixed;
  z-index: 999;
  top: 1.08rem;
  right: 3.6rem;
  .el-menus{
    width: 3.6rem;
    padding: .03rem .11rem;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 9;
    background: rgba(0,0,0,0)!important;
    pointer-events: auto;
    li{
      float: left;
      font-size: .14rem;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #fff;
      cursor: pointer;
    }
  }
}
</style>